<template>
    <div class="address-list">
        <van-nav-bar left-arrow title="收货地址" right-text="添加新地址"
                     @click-left="handleRouteBack"
                     @click-right="handleRouteToNewAddress"/>
        <white-space/>
        <address-list :addresses="addresses"/>
    </div>
</template>

<script>
  import { CellGroup, NavBar } from "vant"
  import { customer, security } from "@mall/api-services"
  import WhiteSpace from "@/components/WhiteSpace"
  import AddressListItem from "@/components/address/AddressListItem"
  import AddressList from "@/components/address/AddressList"

  export default {
    name: "AddressListView",
    components: {
      AddressList,
      AddressListItem,
      WhiteSpace,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
    },
    data() {
      return {
        addresses: [],
      }
    },
    created() {
      this.refresh()
    },
    methods: {
      handleRouteBack() {
        this.$router.back()
      },
      handleRouteToNewAddress() {
        this.$router.push("/addresses/new")
      },
      refresh() {
        const customerId = security.SecurityUserHolder.getUserId()
        customer.CustomerAddressServiceV1
          .getAddresses(customerId)
          .then(addresses => this.addresses = addresses)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .address-list {
    }
</style>
